<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品列表</title>
<jsp:include page="header.jsp"></jsp:include>
<style>
	.my-row {
			width: 100%;
			background-color: #fff;
			padding-left: 12px;
			font-size: .9rem;
		}
		.weui-media-box__hd img {
			display:block;
			width: 100%;
			height: 100%;
		}
		.my-so {
			color: #000;
			font-size: 14px;
			margin-left: 5px;
			padding-top: 3px;
	}
</style>
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header fixed-top'>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的药品</span>
      </label>
    </form>
    <a href="javascript:" class="my-so" id="searchCancel">搜索</a>
  </div>
  <div class="pro-sort">
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="placeholder NormalCss">综合</div></div>
      <div class="weui-flex__item"><div class="placeholder SortAscCss">按销量</div></div>
      <div class="weui-flex__item"><div class="placeholder SortDescCss">按价格</i></div></div>
    </div>
  </div>
</header>
<!--主体-->
<div class="weui-content" style="padding-top:85px;">
  <!--产品列表--滑动加载-->
  <div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
  </div>
  <div id="list" class='demos-content-padded proListWrap'>
 	<c:choose>
 	<c:when test="${not empty list}">
	<c:forEach var="app" items="${list}" varStatus="st">
    <div class="pro-items">
      <a href="${pageContext.request.contextPath }/phone/detail?id=${app.id}" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="${pageContext.request.contextPath }${app.goodsPic}" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">${app.goodsName}</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">${app.goodsPrice}</em></div>
          <!-- <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta"><em class="num">0</em>条评价</li>
            <li class="weui-media-box__info__meta"><em class="num">100%</em>好评</li>
          </ul> -->
        </div>
      </a>
    </div>
    </c:forEach>
    </c:when>
    <c:otherwise>
    	<div class="my-row">没有搜到你找的药品! <a href="javascript:history.go(-1);">返回</a></div>
    </c:otherwise>
    </c:choose>
  </div>
 <!--  <div class="weui-loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  -->
  
</div>
<jsp:include page="foot.jsp"></jsp:include>
<script>
      $(document.body).pullToRefresh().on("pull-to-refresh", function() {
        setTimeout(function() {
          $("#time").text(new Date);
          $(document.body).pullToRefreshDone();
        }, 2000);
      });
      // infinite
      var loading = false;
      $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
          $("#list").append('<div class="pro-items"><a href="pro_info.html" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="upload/pro3.jpg" alt=""></div><div class="weui-media-box__bd"><h1 class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</h1><div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div><ul class="weui-media-box__info prolist-ul"><li class="weui-media-box__info__meta"><em class="num">0</em>条评价</li><li class="weui-media-box__info__meta"><em class="num">100%</em>好评</li></ul></div></a></div>');
          loading = false;
        }, 2000);
      });
      
      $('#searchCancel').click(function(){
 		 var name =$('#searchInput').val();
 		 if(''!=name){
 			 //$.alert(name);
 			 var url ="/phone/itemSearch?name="+name;
 			 window.location.href=url;
 		 }
 	 });
</script>
</body>
</html>